<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :advantage="true" @handSearch="handleSearch"/>
        <category-bar :collapse="false" />
      </div>
    </div>
    <div class="container-width">
      <div class="flex flex-between">
        <breadcrumb last-name="公告" class="pad-t-8" />
        <div class="flex v-align-c font-12">
          <span>总共找到</span>
          <span class="font-number pad-l-4 pad-r-4">{{ dataTotal }}</span>
          <span>条公告</span>
        </div>
      </div>
      <div class="bgc-white overflow-h" v-loading="loading" element-loading-text="加载中" element-loading-background="#f5f5f5">
        <ul v-if="true" class="notice-list">
          <li
            v-for="(item, index) in listData"
            :key="index"
            class="flex flex-between cursor-p pad-t-13 pad-b-13"
            @click="detail(item)"
          >
            <span>{{ item.contentName }}</span>
            <span class="font-12 font-color-6">{{ item.updateTime ? item.updateTime : item.createTime }}</span>
          </li>
        </ul>
        <!-- 空数据展示 -->
        <none-data v-if="dataTotal <= 0" />
      </div>
      <div class="flex flex-center pad-t-25 pad-b-25">
        <el-pagination class="pagination" background layout="prev, pager, next, jumper"
        :total="dataTotal" :page-size="queryParams.size" @current-change="handleCurrentChange"/>
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
    <right-nav-sticky />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import headerLogin from '@/components/headerLogin/index.vue'
import logoBar from '@/components/logoBar/index.vue'
import categoryBar from '@/components/categoryBar/index.vue'
import footerLinks from '@/components/footerLinks/index.vue'
import footerInfos from '@/components/footerInfos/index.vue'
import rightNavSticky from '@/components/rightNavSticky/index.vue'
import breadcrumb from '@/components/breadcrumb/index.vue'
import noneData from '@/components/noneData/index.vue'
import { getContentListPage } from '@/api/content/content'

export default defineComponent({
  name: 'Index',
  components: {
    headerLogin,
    logoBar,
    categoryBar,
    footerLinks,
    footerInfos,
    rightNavSticky,
    breadcrumb,
    noneData
  },
  setup() {
    const router = useRouter()
    const loading = ref(false)
    const dataTotal = ref(0)
    const listData = ref(<any>[])
    const queryParams = ref({
        size: 10,
        currentPage: 1,
        contentName: '',
        applicationChannelB2bDistributionPlatformFlag: 1,
        contentType: '',
        status: 1
      })
    onMounted(() => {
      const pContentType = router.currentRoute.value.query.contentType
      if(pContentType){
        queryParams.value.contentType = pContentType
      }
      init()
    })
    const init = () => {
      loading.value = true
      getContentListPage(queryParams.value).then(response => {
          loading.value = false
          if (response.isError) return
          dataTotal.value = response.data.total
          listData.value = response.data.records
        })
    }

    const handleSearch = (form:any) => {
        queryParams.value.contentName = form.title
        init()
      }

      const handleCurrentChange = (val:number) => {
        queryParams.value.currentPage = val
        init()
      }

    const detail = (item:object) => {
      router.push({ path: '/notice/detail', query: { contentInfoId: item.contentInfoId }})
    }

    return {
      detail,
      listData,
      loading,
      dataTotal,
      handleSearch,
      handleCurrentChange,
      queryParams
    }
  }
})
</script>

<style lang="scss" scoped>
.space-category{
  width: 264px;
}
.slider-sign-notice{
  width: 232px;
}
.footer-line{
  height: 1px;
  background: #dbdbdb;
  margin: 0 3%;
}
.notice-list{
  padding: 23px 182px 25px 32px;
}
</style>
